<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
    <div style="height: 60px;background-color: #312e2e;">
        <div style="margin: 0 auto; height: 60px;width: 1000px;color: white; background-color: #312e2e;font-size: 30px;text-align: right;line-height: 60px;">欢迎登录！</div>
    </div>
    <h4 style="color: white;">餐厅后台管理系统</h4>
    <div id="itembox">
        <ul id="tab">
            <li>菜品管理></li>
            <li>订单管理></li>
            <li>个人管理></li>
            <li>用户管理></li>
        </ul>
        <!-- 菜品部分 -->
        <section id="foodsec">
            <input type="text" placeholder="搜索菜品"><button id="exp_food">GO</button>
            <table cellspacing="0">
                <tr>
                    <th style="width: 100px;">菜名</th>
                    <th style="width: 100px;">价格</th>
                    <th style="width: 200px;">描述</th>
                    <th style="width: 100px;">类型</th>
                    <th style="width: 100px;">大类</th>
                    <th style="width: 100px;">操作</th>
                    <th style="width: 100px;">删除</th>
                </tr>
            </table>
            <ul id="foodbox">


            </ul>
            <div id="pack_foodpag">
                <button id="foodfront">首页</button>
                <button id="arw-left"><</button>
                     <div id="food"></div>
                        <button id="arw-right">></button>
                        <button id="foodlast">尾页</button>
            </div>
            <i id="addfood" class="fa fa-plus-square" style="font-size:48px;color:skyblue;cursor: pointer;"></i>
        </section>
        <!-- 订单部分 -->
        <section id="ordersec">
            <input type="text" placeholder="查询订单"><button id="exp_order">GO</button>
            <table cellspacing="0">
                <tr>
                    <th style="width: 150px;">用户名</th>
                    <th style="width: 100px;">订单金额</th>
                    <th style="width: 250px;">手机号</th>
                    <th style="width: 100px;">支付状态</th>
                    <th style="width: 100px;">操作</th>
                    <th style="width: 100px;">删除</th>
                </tr>
            </table>
            <ul id="orderbox">


            </ul>
            <div id="pack_orderpag">
                <button id="orderfront">首页</button>
                <button id="arw_left"><</button>
                        <div id="order"></div>
                        <button id="arw_right">></button>
                        <button id="orderlast">尾页</button>
            </div>
            <i id="addorder" class="fa fa-plus-square" style="font-size:48px;color:skyblue;cursor: pointer;"></i>
        </section>
        <section id="usersec">
            <i class="fa fa-user-secret" style="font-size:120px;color:gray" id="userimg"></i>
            <table cellspacing="0">
                <tr>
                    <td><b>用户名</b>:</td>
                    <td id="uus"></td>
                </tr>
                <tr>
                    <td><b>手机号</b>:</td>
                    <td id="uphone"></td>
                </tr>
                <tr>
                    <td><b>年龄</b>:</td>
                    <td id="uage"></td>
                </tr>
                <tr>
                    <td><b>性别</b>:</td>
                    <td id="usex"></td>
                </tr>
            </table>
            <div>
                <a href="javascript:;">修改信息</a>
            </div>
        </section>
        <!-- users部分 -->
        <section>
            <div id="usersbox">
                <input type="text" placeholder="查找用户" id="exp_fram"><button id="explore">GO</button>
                <!-- <button style="left: 10px; background-color: green;">批量管理</button> -->
                <!-- <button style="left: 120px; background-color: red;">一键删除</button> -->
                <table cellspacing="0" style="background-color: rgb(56, 135, 168);">
                    <!-- <td style="width: 30px;height: 50px; text-align: center;"><input type="checkbox" name="" id=""></td> -->
                    <td style="width: 230px;height: 50px;text-indent: 2em;">用户名</td>
                    <!-- <td style="width: 200px;height: 50px;">id</td> -->
                    <td style="width: 250px;height: 50px;">电话号</td>
                    <td style="width: 80px;height: 50px;">年龄</td>
                    <td style="width: 80px;height: 50px;">性别</td>
                    <td style="width: 80px;height: 50px;">操作</td>
                    <td style="width: 80px;height: 50px;">删除</td>
                </table>
                <!-- <div id="pack_foodpag">
                    <button id="foodfront">首页</button>
                    <button id="foodleft"><</button>
                    <div id="food"></div>
                    <button id="toright">></button>
                    <button id="euslast">尾页</button></div> -->
            </div>
            <ul id="usersmsg">
                <li>
                    <table cellspacing="0">
                        <tr>
                            <td style="width: 30px;height: 50px; text-align: center;"></td>
                            <td style="width: 180px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 200px;height: 50px;text-indent: 2em;"></td>
                            <td style="width: 150px;height: 50px;text-indent: 5em;"></td>
                            <td style="width: 80px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 80px;height: 50px;"><button class="per_change"><i class="fa fa-pencil" style="font-size:18px"></i>修改</button></td>
                            <!-- <td style="width: 80px;height: 50px;"></td> -->
                            <td style="width: 80px;height: 50px;"><button class="per_can"><i class="fa fa-trash" style="font-size:18px"></i>删除</button></td>
                        </tr>
                        <tr>
                            <td style="width: 30px;height: 50px; text-align: center;"></td>
                            <td style="width: 180px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 200px;height: 50px;text-indent: 2em;"></td>
                            <td style="width: 150px;height: 50px;text-indent: 5em;"></td>
                            <td style="width: 80px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 80px;height: 50px;"><button class="per_change"><i class="fa fa-pencil" style="font-size:18px"></i>修改</button></td>
                            <!-- <td style="width: 80px;height: 50px;"></td> -->
                            <td style="width: 80px;height: 50px;"><button class="per_can"><i class="fa fa-trash" style="font-size:18px"></i>删除</button></td>
                        </tr>
                        <tr>
                            <td style="width: 30px;height: 50px; text-align: center;"></td>
                            <td style="width: 180px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 200px;height: 50px;text-indent: 2em;"></td>
                            <td style="width: 150px;height: 50px;text-indent: 5em;"></td>
                            <td style="width: 80px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 80px;height: 50px;"><button class="per_change"><i class="fa fa-pencil" style="font-size:18px"></i>修改</button></td>
                            <!-- <td style="width: 80px;height: 50px;"></td> -->
                            <td style="width: 80px;height: 50px;"><button class="per_can"><i class="fa fa-trash" style="font-size:18px"></i>删除</button></td>
                        </tr>
                        <tr>
                            <td style="width: 30px;height: 50px; text-align: center;"></td>
                            <td style="width: 180px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 200px;height: 50px;text-indent: 2em;"></td>
                            <td style="width: 150px;height: 50px;text-indent: 5em;"></td>
                            <td style="width: 80px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 80px;height: 50px;"><button class="per_change"><i class="fa fa-pencil" style="font-size:18px"></i>修改</button></td>
                            <!-- <td style="width: 80px;height: 50px;"></td> -->
                            <td style="width: 80px;height: 50px;"><button class="per_can"><i class="fa fa-trash" style="font-size:18px"></i>删除</button></td>
                        </tr>
                        <tr>
                            <td style="width: 30px;height: 50px; text-align: center;"></td>
                            <td style="width: 180px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 200px;height: 50px;text-indent: 2em;"></td>
                            <td style="width: 150px;height: 50px;text-indent: 5em;"></td>
                            <td style="width: 80px;height: 50px;text-indent: 1em;"></td>
                            <td style="width: 80px;height: 50px;"><button class="per_change"><i class="fa fa-pencil" style="font-size:18px"></i>修改</button></td>
                            <!-- <td style="width: 80px;height: 50px;"></td> -->
                            <td style="width: 80px;height: 50px;"><button class="per_can"><i class="fa fa-trash" style="font-size:18px"></i>删除</button></td>
                        </tr>
                    </table>
                </li>
            </ul>
            <div id="pack_pag">
                <button id="usefront">首页</button>
                <button id="toleft"><</button>
                        <div id="pages"></div>
                        <button id="toright">></button>
                        <button id="uselast">尾页</button>
            </div>
        </section>
        <i id="exit" class="fa fa-power-off" style="font-size:48px;color:white"></i>
    </div>
    <div id="shadowbox">
        <div id="changebox">
            <i class="fa fa-remove" style="font-size:36px"></i>
            <h3 style="text-indent: 2em;">编辑用户信息</h3>
            <input type="text" id="cus" placeholder="用户名(new)"><br>
            <input type="text" placeholder="手机号(new)" id="cphone"><br>
            <input type="text" placeholder="年龄(new)" id="cage"><br>
            <input type="text" placeholder="性别(new)：男，女" id="csex"><br>
            <!-- <div style="margin: 12px 48px;height: 45px;font-size: 20px; width: 300px;background-color: aqua;">性别(new)： <checkbox>男</checkbox> </div>    -->
            <button style="background-color: skyblue;">提交</button><button style="background-color: orange;">取消</button>
        </div>
    </div>
    <!-- 对多个用户信息编辑 -->
    <div id="eidshadowbox">
        <div id="eidchangebox">
            <i class="fa fa-remove" style="font-size:36px"></i>
            <h3 style="text-indent: 2em;">编辑用户信息</h3>
            <input type="text" id="eid_cus" placeholder="用户名(new)"><br>
            <!-- <input type="text" placeholder="手机号(new)" id="eid_cphone"><br> -->
            <input type="text" placeholder="年龄(new)" id="eid_cage"><br>
            <input type="text" placeholder="性别(new):男，女" id="eid_csex"><br>
            <button style="background-color: skyblue;">提交</button><button style="background-color: orange;">取消</button>
        </div>
    </div>
    <div id="expshadowtrue">
        <div id="expt">
            <i class="fa fa-remove" style="font-size:36px" id="userremove"></i>
            <i class="fa fa-user" style="font-size:48px;color:green" id="acs"></i>
            <h3></i>查询成功</h3>
            <table cellspacing="0">
                <tr style="background-color: rgb(56, 135, 168);">
                    <th style="width: 200px;">用户</th>
                    <th style="width: 300px;">电话号</th>
                    <th style="width: 100px;">性别</th>
                    <th style="width: 100px;">年龄</th>
                </tr>
            </table>
        </div>
    </div>
    <!-- 对food的弹窗进行处理 -->
    <div id="food_eid_shadow">
        <div id="foodchangebox">
            <i class="fa fa-remove" style="font-size:36px"></i>
            <h3 style="text-indent: 2em;">编辑菜品信息</h3>
            <input type="text" placeholder="菜名(new)" id="eid_dish"><br>
            <input type="text" placeholder="价格(new)" id="eid_price"><br>
            <input type="text" placeholder="描述(new)" id="eid_desc"><br>
            <input type="text" placeholder="类型(new)" id="eid_type"><br>
            <input type="text" placeholder="大类(new)：面，水果，饮品，米" id="eid_typeid">
            <button style="background-color: skyblue;">提交</button><button style="background-color: orange;">取消</button>
        </div>
    </div>
    <div id="expfoodbox">
        <div id="expfood">
            <i class="fa fa-remove" style="font-size:36px" id="fclose"></i>
            <i class="fa fa-cutlery" style="font-size:48px;color:green" id="foodimg"></i>
            <h3></i>查询成功</h3>
            <table cellspacing="0">
                <tr style="background-color: rgb(56, 135, 168);">
                    <th style="width: 150px;">菜名</th>
                    <th style="width: 100px;">价格</th>
                    <th style="width: 250px;">描述</th>
                    <th style="width: 100px;">类型</th>
                    <th style="width: 100px;">大类</th>
            </table>
        </div>
    </div>
    <div id="add_food_shadow">
        <div id="add_food">
            <i class="fa fa-remove" style="font-size:36px"></i>
            <h3 style="text-indent: 2em;">添加菜品信息</h3>
            <input type="text" placeholder="菜名" id="add_dish"><br>
            <input type="text" placeholder="价格" id="add_price"><br>
            <input type="text" placeholder="描述" id="add_desc"><br>
            <input type="text" placeholder="类型" id="add_type"><br>
            <input type="text" placeholder="大类:面/水果/饮品/米" id="add_typeid">
            <button style="background-color: skyblue;">提交</button><button style="background-color: orange;">取消</button>
        </div>
    </div>
    <!-- 属于order的弹窗 -->
    <div id="order_eid_shadow">
        <div id="orderchangebox">
            <i class="fa fa-remove" style="font-size:36px"></i>
            <h3 style="text-indent: 2em; height: 30px;">编辑用户订单信息</h3>
            <div id="us"></div>
            <input type="text" placeholder="订单金额(new)" id="eid_amount"><br>
            <input type="text" placeholder="支付状态(new)：已支付，未支付" id="eid_pay"><br>
            <button style="background-color: skyblue;">提交</button><button style="background-color: orange;">取消</button>
        </div>
    </div>
    <div id="exporderbox">
        <div id="exporder">
            <i class="fa fa-remove" style="font-size:36px" id="oclose"></i>
            <i class="fa fa-credit-card" style="font-size:48px;color:green" id="orderimg"></i>
            <h3></i>查询成功</h3>
            <table cellspacing="0">
                <tr style="background-color: rgb(56, 135, 168);">
                    <th style="width: 150px;">用户名</th>
                    <th style="width: 150px;">金额</th>
                    <th style="width: 250px;">手机号</th>
                    <th style="width: 100px;">支付状态</th>                  
            </table>
        </div>
    </div>
    <div id="add_order_shadow">
        <div id="add_order">
            <i class="fa fa-remove" style="font-size:36px"></i>
            <h3 style="text-indent: 2em;">添加订单信息</h3>
            <input type="text" placeholder="用户名" id="add_us"><br>
            <input type="text" placeholder="金额" id="add_amount"><br>
            <input type="text" placeholder="电话" id="add_phone"><br>
            <input type="text" placeholder="支付状态:已支付/未支付" id="add_pay"><br>
            <!-- <input type="text" placeholder="大类" id="add_typeid"> -->
            <button style="background-color: skyblue;">提交</button><button style="background-color: orange;">取消</button>
        </div>
    </div>
</body>
<script src="../js/jQuery.min.js"></script>
<script src="../js/index.js"></script>

</html>